<template>
	<div class="home" style="background-color: #e9eef3;padding: 10px;">
<!-- 市 -->
		<el-row :gutter="20">
			<el-col :span="8">
				<v-distpicker hide-area :city-disabled=discity @province="onChangeProvince" @city="changeCity">
				</v-distpicker>
			</el-col>
			<el-col :span="4"><span class="demonstration">订单日期</span></el-col>
			<el-col :span="8">

				<el-date-picker v-model="date" type="daterange" range-separator="至" start-placeholder="开始日期"
					end-placeholder="结束日期" @change="changeDate">
				</el-date-picker>
			</el-col>
		</el-row>


		<el-divider></el-divider>

		<el-row :gutter="12" type="flex" class="row-bg" justify="center">
			<el-col :span="6">
				<el-card shadow="hover" body-style="height:60px;">
					合伙人总销售量<br />{{userNum}}
				</el-card>
			</el-col>
			<el-col :span="6">
				<el-card shadow="hover" body-style="height:60px;">
					大客户销售量<br />{{biguserNum}}
				</el-card>
			</el-col>
		</el-row>


		<el-divider></el-divider>

		<el-row :gutter="15">
			<el-col :span="5"><span>销量排序：</span></el-col>
			<el-col :span="10">
				<el-radio-group v-model="rank">
					<el-radio :label="3">全部</el-radio>
					<el-radio :label="6">升序</el-radio>
					<el-radio :label="9">降序</el-radio>
				</el-radio-group>
			</el-col>
		</el-row>

		<el-divider></el-divider>


		<el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="selectObject">
			<el-menu-item index="1">
				合伙人
			</el-menu-item>
			<el-menu-item index="2">
				大客户
			</el-menu-item>
		</el-menu>


		<el-table stripe="" border="" :data="tabledata" style="width: 100%">
			<el-table-column prop="province" sortable label="省" width=""> </el-table-column>
			<el-table-column prop="city" sortable label="市" width=""> </el-table-column>
			<el-table-column prop="sale" sortable label="销量" width=""> </el-table-column>
		</el-table>
	</div>
</template>

<script>
	import axios from 'axios'
	import VDistpicker from 'v-distpicker'

	export default {

		name: 'home',
		data() {
			return {
				userNum: 0,
				biguserNum: 0,
				rank: 3,
				date: [],
				pro: [],
				city:[],
				activeIndex: '1',
				tabledata: [],
				url: 'http://47.108.201.43:3000',
				key: 1,
				discity:true
			}
		},
		//生成时触发
		created() {
			var that = this;
			//登陆成功之后

			axios.get(that.url + '/api/getCopartnerData').then(function(res) {
				if (res.data.code == 200) {
					var data = res.data


					if (that.key == 1) {
						that.tabledata = data.partners
					} else {
						that.tabledata = data.counts
					}

					data.partners.forEach(function(item) {
						that.userNum += item.sale
					})
					data.counts.forEach(function(item) {
						that.biguserNum += item.sale
					})

				} else {

					that.$message.error({
						message: res.data,
						showClose: true
					});
				}

			})
			this.$message.success({
				message: "加载成功",
				showClose: true
			});
		},
		methods: {
			selectObject(key) {
				var that = this
				that.key = key
				if (that.pro.code) {
					this.onChangeProvince(that.pro)

				} else {
					this.getInitData()

				}


			},
			changeDate(value) {
				var that = this

				if (!that.pro.code) {
					that.$message.warning({
						message: "请先选择省份！",
						showClose: true
					})
				} else {
					that.date = value
					console.log(that.date)
					that.$message.info({
						message: "暂无接口！",
						showClose: true
					})
				}
			},
			//获取初始数据
			getInitData() {
				var that = this;
				//登陆成功之后

				axios.get(that.url + '/api/getCopartnerData').then(function(res) {
					if (res.data.code == 200) {
						var data = res.data
						if (that.key == 1) {
							that.tabledata = data.partners
						} else {
							that.tabledata = data.counts
						}


					} else {

						that.$message.error({
							message: res.data,
							showClose: true
						});
					}

				})

			},
			changeCity(city){
				var that=this
				that.city=city
				if (city.code) {
					axios.post(that.url + '/api/queryProvincialData', {
						datas: {
							province:that.pro.value,
							city:city.value
						}
					}).then(function(res){
						
							if (res.status == 200) {
								if (res.data.code == 200) {
									that.$message.success({
										message: "查询城市成功！",
										showClose: true,
						
									})
									if (that.key == 1) {
										that.tabledata = res.data.partners
									} else {
										that.tabledata = res.data.counts
									}
								} else {
									that.$message.error({
										message: res.data.msg,
										showClose: true
									})
								}
							} else {
								that.$message.error({
									message: '错误代码' + res.status,
									showClose: true
								})
							}
						
						
					})
				} else{
					this.onChangeProvince(that.pro)
				}
			},
			onChangeProvince(province) {
				
				var that = this	
				if(province.code){
					that.discity=false
				}
				else{
					that.discity=true
				}			
				that.pro = province
				if (province.code) {

					axios.post(that.url + '/api/queryProvincialData', {
						datas: {
							province: province.value
						}
					}).then(function(res) {
						if (res.status == 200) {
							if (res.data.code == 200) {
								that.$message.success({
									message: "查询省份成功！",
									showClose: true,

								})
								if (that.key == 1) {
									that.tabledata = res.data.partners
								} else {
									that.tabledata = res.data.counts
								}
							} else {
								that.$message.error({
									message: res.data.msg,
									showClose: true
								})
							}
						} else {
							that.$message.error({
								message: '错误代码' + res.status,
								showClose: true
							})
						}

					})
				} else {
					this.getInitData()
				}

			},


		},

		components: {
			VDistpicker
		}
	}
</script>
